<template>
  <div id="wrapper">
    <el-card class="box-card">
      <el-row>
        <el-col :xs="24" :sm="24" :lg="24" class="border"></el-col>
      </el-row>
      <el-row>
        <el-col :xs="24" :sm="12" :lg="12" class="col-box">
          <span class="col-span">部门：</span>
          <el-cascader
          style="width:80%"
            v-model="params['department']"
            @change="changeFilter"
            :options="departmentFilterData"
            :props="{ checkStrictly: true }"></el-cascader>
        </el-col>
        <el-col :xs="4" :sm="4" :lg="4" style="float:right;margin-top: -16px;">
          <el-tooltip placement="top" >
            <div slot="content">
              操作指南
            </div>
            <div class="icon-item" >
              <a href="https://thundersoft.feishu.cn/docs/doccn3z9puFzS1K7t9gHtvkqROw" target="_blank">
                <img :src="logo">
              </a>
            </div>
          </el-tooltip>
        </el-col>
      </el-row>
      <el-row>
        <el-col :xs="24" :sm="16" :lg="16" class="col-box">
          <span class="col-span">技术领域：</span>
          <el-cascader
          style="width: 80%"
            v-model="params['technical_field']"
            :options="singleFilterData"
            :props="{ multiple: true }"
             @change="changeFilter"
            collapse-tags
            clearable></el-cascader>
        </el-col>
        <el-col :xs="24" :sm="8" :lg="8" class="col-box">
          <span class="col-span">时间段：</span>
          <el-date-picker
            v-model="dateRange"
            @change="changeDateRange"
            type="daterange"
            unlink-panels
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-col>
      </el-row>
      <el-row class="advance-box" :class="advanceHidden ? 'advance-hidden' : 'advance-show'">
        <el-col :xs="24" :sm="12" :lg="12" class="col-box">
          <span class="col-span">项目需求：</span>
          <!-- <el-select v-model="params['site_power_id']" style="width:80%" placeholder="请选择" @change="changeProjectFilter" filterable clearable>
              <el-option
              v-for="(v,i) in projectList"
              :key="i"
              :label="v.project_workflow.project_name + '（' + (v.technical_field ? v.technical_field.name : '') + '）'"
              :value="v.id">
              </el-option>
          </el-select> -->
          <el-cascader
            v-model="params['site_power_id']"
            style="width:80%"
            :options="projectList"
            @change="changeProjectFilter"
            filterable clearable></el-cascader>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="12" class="col-box">
          <span class="col-span">关键字：</span>
          <el-input v-model="params['keywords']" placeholder="查询关键字,姓名/ldap" @change="changeFilter"></el-input>
        </el-col>
        <el-col :xs="12" :sm="8" :lg="4" class="col-box" style='margin-left: .5%'>
          <span class="col-span">分配类型：</span>
          <el-select
              v-model="params['dispatch_type']"
              placeholder="请选择分配类型"
              @change="changeFilter"
              clearable
          >
            <el-option
                v-for="(v,i) in dispatchTypeList"
                :key="i"
                :label="v.label"
                :value="v.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :xs="24" :sm="8" :lg="6" class="col-box" v-for="(item1,index1) in editList" :key="index1">
          <span class="col-span">{{ item1.name }}</span>
          <el-select v-model="params[item1.value]" multiple collapse-tags placeholder="请选择" @change="changeFilter">
              <el-option
              v-for="(v,i) in filterData[item1.value]"
              :key="item1.value+i"
              :label="v.text"
              :value="v.value">
              </el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row>
        
        <el-col v-if="sharePermissions" :xs="12" :sm="12" :lg="12" style="text-align: right;float:right;margin-bottom: -8px">
          <el-button @click="openAssist()" type="primary">增加部门资源协管</el-button>
        </el-col>
      </el-row>
      <div class="advance-btn" @click="triggleSearch">{{advanceHidden ? '更多条件' : '收起'}}<i :class="advanceHidden ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"></i></div>
      <el-row>
        <el-col :xs="8" :sm="8" :lg="8">
          <div class="num_word">成员总计：{{tableTotal}}（人）</div>
        </el-col>
        <el-col :xs="16" :sm="16" :lg="16">
          <div class="num_word" style="text-align: right;">tip: 单击任一起始周和结束周（双击任一周数）即可进行人员分配</div>
        </el-col>
      </el-row>
      <div>
        <div>
          <div style="width:30px;height:20px;background:#feecbade;display: inline-block"></div> <span style="font-size:14px;font-weight:normal">未分配满</span>
          <div style="width:30px;height:20px;background:#eb070763;display: inline-block"></div> <span style="font-size:14px;font-weight:normal">未投</span>
          <div style="width:30px;height:20px;background:#909399;display: inline-block"></div> <span style="font-size:14px;font-weight:normal">未入职</span>
          
        </div>
        <div></div>
        <el-button type="success" style="float:right;margin:-40px 10px 10px 0" @click="check()" v-show="showDown">工时导出</el-button>
        <el-button type="warning" style="float:right;margin:-40px 10px 10px 0" @click="showDetile()" v-show="showCheck">工时预览</el-button>
      </div>
      <el-table class="el-table marTB"
        ref="singleTable"
        :data="tableData"
        @cell-click="selectCell"
        :cell-class-name="addClass"
        :border="true"
        :header-cell-style="{background:'#eef1f6'}"
        style="width:100%;margin-bottom:15px"
        min-height="100" 
        v-loading="loading">
       <el-table-column align="center" property="name" fixed="left" label="员工姓名" min-width="110">
          <template slot="header" slot-scope="scope" >
              <div>
                <span>员工姓名</span>
                <span>
                  <i class="el-icon-caret-right" @click="toggle1()" v-if='clicked===1' style="cursor:pointer;font-size: 22px;"></i>
                  <i class="el-icon-caret-bottom" @click="toggle()"  v-else style="cursor:pointer;font-size: 22px;"></i>
                </span>
              </div>
            </template>
          <template slot-scope="scope"> 
            <div v-if="scope.row.name === '未投总计'">
                {{scope.row.name}}
            </div>
            <div v-else>
              <el-tooltip placement="top" effect="light" v-if="scope.row.name">
              <div slot="content">{{scope.row.dept}}</div>
              <span>{{scope.row.name}}</span>
            </el-tooltip>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" property="employee_id" label="员工ID" v-if='clicked'></el-table-column>
        <el-table-column align="center" property="rank" label="职级" v-if='clicked'></el-table-column>
        <el-table-column align="center" property="type" label="员工类型" v-if='clicked'>
          <!-- <template slot-scope="scope">
              <span>{{scope.row.type ? scope.row.type : '正式员工'}}</span>
          </template> -->
        </el-table-column>
        <el-table-column align="center" property="working_years" label="司龄" width="60" v-if='clicked'></el-table-column>

        <el-table-column align="center" property="position" label="工作岗位" width="100" v-if='clicked'>
          <template slot-scope="scope">
                <span v-for="(v,i) in scope.row.position" :key="v.id">
                  <span>{{v.name}}<span v-if="v&&(i != scope.row.position.length-1)"> / </span></span>
                </span>
          </template>
        </el-table-column>
        <el-table-column align="center" property="working_mode" label="工作模式" v-if='clicked'>
          <template slot-scope="scope">
                <span v-for="(v,i) in scope.row.working_mode" :key="v.id">
                  <!-- <el-tag class="tag-m" v-if="v" effect="plain">{{v.name}}</el-tag> -->
                  {{v.name}}<span v-if="v&&(i != scope.row.working_mode.length-1)"> / </span>
                </span>
          </template>
        </el-table-column>
        <!-- <el-table-column align="center" property="technology_module" label="技术模块" width="150">
          <template slot-scope="scope">
                <span v-for="(v,i) in scope.row.technology_module" :key="v.id">
                  {{v.name}}<span v-if="v&&(i != scope.row.technology_module.length-1)"> / </span>
                </span>
          </template>
        </el-table-column> -->
        <el-table-column align="center" property="business_area" label="业务领域" width="150" v-if='clicked'>
          <template slot-scope="scope">
            <el-tooltip placement="top" effect="light" v-if="scope.row.business_area.length > 0">
              <div slot="content" v-for="(v,i) in scope.row.business_area" :key="i">
                <div style="line-height: 20px">{{v.name}}</div>
              </div>
              <el-tag type="primary">{{scope.row.business_area[0].name}}</el-tag>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column  align="center" property="technical_field" label="技术领域" width="200" v-if='clicked'>
          <template slot-scope="scope">
            <!-- <div style="margin-bottom: 4px" v-for="(v,i) in scope.row.technical_field" :key="i">
                <el-tooltip placement="top" effect="light" v-if="v.name">
                  <div slot="content">{{v.display}}</div>
                  <el-tag type="primary">{{v.name.length > 20 ? v.name.substring(0,19)+'...':v.name}}</el-tag>
                </el-tooltip>
            </div> -->
            <el-tooltip placement="top" effect="light" v-if="scope.row.technical_field.length > 0">
              <div slot="content" v-for="(v,i) in scope.row.technical_field" :key="i">
                <div style="line-height: 20px">{{v.display}}</div>
              </div>
              <el-tag type="primary">{{scope.row.technical_field[0].name.length > 15 ? scope.row.technical_field[0].name.substring(0,14)+'...':scope.row.technical_field[0].name}}</el-tag>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column align="center" property="status_show" width="120" label="人员状态" v-if='clicked'>
          <template slot-scope="scope">
            <div v-if="scope.row.status_show">
              <el-tag v-if="scope.row.status == 1" type="success" effect="plain">{{scope.row.status_show}}</el-tag>
              <el-tag v-else type="danger" effect="plain">{{scope.row.status_show}}</el-tag>
            </div>

          </template>
        </el-table-column>
        <!-- <el-table-column align="center" property="estimate_leavedate" width="120" label="预计离职日期">
          <template slot-scope="scope">
              <span>{{scope.row.estimate_leavedate}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" property="leavedate" width="120" label="实际离职日期">
          <template slot-scope="scope">
              <span>{{scope.row.leavedate}}</span>
          </template>
        </el-table-column> -->
        <el-table-column align="center" type="cell" v-for="(v,i) in weekList" :key="i" :property="v" :label="week2date(v)" min-width="170"  >
            <template slot-scope="scope">
              <div v-if="scope.row.matter_map[v]" class="status-box" >
                 <span class="status-style">休假</span>
              </div>
              <div v-else style="margin-bottom: 4px;" v-for="(work,ind) in scope.row.working_hours[v]" :key="ind" >
                <span v-if="scope.row.name === '未投总计'" style="color:red">
                  {{ (tableTotal - work.spend).toFixed(1) }}
                </span>
                <span v-else>
                  <el-tooltip v-if="work.project_name && work.project_name != '未投总计'" placement="top" effect="light" >
                  <div slot="content">
                      <div>
                        {{work.project_name}}（{{work.spend | rounding}}）
                      </div>
                      <div style="margin-top:5px">
                        {{"项目PM："+work.project_manager}}
                      </div>
                  </div>
                  <el-tag type="primary" closable @close="handleClose(scope.row,v,ind)" style="margin-right:5px">
                    {{work.project_name.length > 10 ? work.project_name.substring(0,9)+'...':work.project_name+'('+work.spend.toFixed(1)+')'}}
                  </el-tag>
                </el-tooltip>
                </span>
              </div>
            </template>

        </el-table-column>
        <el-table-column align="center" fixed="right" label="操作" min-width="150" >
          <template slot-scope="scope">
            <div v-if="scope.row.name != '未投总计'">
              <el-button type="text" size="mini" @click="details(scope.row.employee_id)">
                查看
              </el-button>
              <el-button type="text" size="mini" @click="edit(scope.row.employee_id)">
                编辑
              </el-button>
              <!-- <el-button type="text" size="mini" @click="distribute(scope.row.employee_id)">
                分配
              </el-button> -->
              <el-popconfirm v-if="scope.row.expatriate" title="确定撤回该员工吗？" style="padding-left: 10px" @onConfirm="deleteDispatch(scope.row.employee_id)">
                <el-button slot="reference" type="text" size="mini" style="color: red">
                  撤回
                </el-button>
              </el-popconfirm>
              <el-button v-if="!scope.row.expatriate" type="text" size="mini" @click="dispatch(scope.row.employee_id)">
                外派
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
      v-show="tableTotal > 10" background layout="prev, pager, next" :page-size="params.pageSize" @size-change="pageSizeChange" @current-change="pageNoChange" :current-page="params.pageNo" style="text-align: center" :total="tableTotal">
      </el-pagination>
      <!-- <div class="num_word" style="margin-top:50px">项目需求GAP统计：</div> -->
      <!-- <div style="margin-left:70%;margin-bottom: 10px"> -->
         <!-- <label for="search">项目搜索:</label>
         <el-select
            v-model="proNames"
            filterable
            multiple
            placeholder="请输入项目名"
            @change="changeSearch($event)"
            >
            <el-option
              v-for="item in searchOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              >
            </el-option>
          </el-select> -->
          <!-- <label for="search">项目搜索:</label>
          <el-select
            v-model="proNames"
            filterable
            multiple
            placeholder="请输入项目名"
            @change="changeSearch($event,'项目')"
            clearable
            >
            <el-option
              v-for="item in searchOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <label for="search" style="margin-left:30%">技术领域:</label>
          <el-select
            v-model="technical"
            filterable
            multiple
            placeholder="请输入技术领域"
            @change="changeSearch($event,'技术领域')"
            clearable>
            <el-option
              v-for="item in technicalOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select> -->
      <!-- </div> -->
      
        <!-- <el-table
          ref="singleTable1"
          :data="GAPtableData"
          border
          style="width: 100%;"
          max-height="800"
          :header-cell-style="{background:'#eef1f6'}"
          :row-class-name="tableRowClassName"
          v-loading="loadingGAP"
          >
          <el-table-column fixed="left" label="项目名" min-width="200" align="center">
            <template slot-scope="scope">
              <div>{{ scope.row.project_name }}</div>
              <div v-if="scope.row.project_name != '总计'">({{ scope.row.technology_name }})</div>
            </template>
          </el-table-column>
          <el-table-column label="需求 / 实际" width="200" align="center">
            <div class="borders">需求</div>
            <div class="borders">实际</div>
            <div style="width: 204px;margin-left: -13px;">GAP</div>
          </el-table-column>

          <el-table-column width="200" align="center" type="cell" v-for="(v,i) in weekList" :key="i" :property="v" :label="week2date(v)">
            <template slot-scope="scope">
              <div class="borders">
                <span v-if="scope.row.showEdit">
                  <span v-if="scope.row.value">
                    <input class="inpBorder" type="number" v-model="scope.row.value[v].need" />
                  </span>
                </span>
                <span v-else>
                    <span v-if="scope.row.value">
                         {{ scope.row.value[v].need | rounding}}
                    </span>
                </span>
              </div>
              <div class="borders">  
                <div v-if="scope.row.value ">
                  <el-tooltip placement="top" effect="light" v-if="scope.row.value[v].get != 0">
                    <div slot="content" v-for="(k,i) in scope.row.value[v].user" :key="i" style="margin-bottom:">{{ k.label + '('+k.value.toFixed(1)+')'}}</div>
                    <span style="cursor:pointer" >{{ scope.row.value[v].get | rounding}}</span>
                  </el-tooltip>
                  <div v-else>
                    <span style="cursor:pointer">{{ scope.row.value[v].get | rounding}}</span>
                  </div>
              </div>
            </div>
              <div style="width: 193px;margin-left: -14px;cursor:pointer" >
                <div v-if="scope.row.value">
                    <span v-if="(scope.row.value[v].need - scope.row.value[v].get) != 0" style="color:red;margin-left: 10px">
                        {{scope.row.value[v].need - scope.row.value[v].get | rounding }}
                    </span>
                    <span v-else style="margin-left: 10px">
                        {{scope.row.value[v].need - scope.row.value[v].get | rounding }}
                    </span>
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column align="center" fixed="right" label="操作" min-width="180">
            <template slot-scope="scope" v-if="scope.row.project_name != '总计'">
              <div>
                <el-button v-show="scope.row.showEdit" type="text" size="mini" @click="saveFn(scope.$index,scope.row)">
                  保存
                </el-button>
                <el-button v-show="!scope.row.showEdit" type="text" size="mini" @click="editFn(scope.$index,scope.row)">
                  编辑
                </el-button>
                <el-button v-show="scope.row.showEdit" type="text" size="mini" @click="cancelFn(scope.$index,scope.row)" >
                  取消
                </el-button>
              </div>

            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          v-show="tableTotal1 > 5"
          background
          layout="prev, pager, next"
          :page-size="params1.pageSize"
          @size-change="pageSizeChange1"
          @current-change="pageNoChange1"
          :current-page="params1.pageNo"
          style="text-align: center"
          :total="tableTotal1">
        </el-pagination> -->
        <!-- <el-table
        :data='dataGap'
        border
        style="width: 100%;margin-top:10px"
        max-height="800"
        :header-cell-style="{background:'#eef1f6'}"
        v-loading="loadingGAP"
        > 
        <el-table-column fixed="left" label="技术领域" min-width="200" align="center">
            <template slot-scope="scope">
              <div>{{ scope.row.technical_field_name }}</div>
              <div v-if="scope.row.technical_field_name!='总计'">({{ scope.row.project_name }})</div>
            </template>
          </el-table-column>
          <el-table-column label="需求 / 实际" width="200" align="center">
            <div class="borders">需求</div>
            <div class="borders">实际</div>
            <div style="width: 204px;margin-left: -13px;">GAP</div>
          </el-table-column>

          <el-table-column width="200" align="center" type="cell" v-for="(v,i) in weekList" :key="i" :property="v" :label="week2date(v)">
            <template slot-scope="scope">
              <div class="borders">
                <span v-if="scope.row.showEdit">
                    <input class="inpBorder" type="number" v-model="scope.row.site_power[v].need" />
                </span>
                <span v-else>
                  {{ scope.row.site_power[v].need | rounding}}
                </span>
              </div>
              <div class="borders"> 
                <div v-if="scope.row.technical_field_name!='总计'">
                  <el-tooltip placement="top" effect="light" v-if="scope.row.site_power[v].get != 0">
                    <div slot="content" v-for="(k,i) in scope.row.site_power[v].user" :key="i" style="margin-bottom:">{{ k.name + '（' + k.spend +'）'}}</div>
                    <span style="cursor:pointer" >{{ scope.row.site_power[v].get | rounding}}</span>
                  </el-tooltip>
                  <div v-else>
                    <span style="cursor:pointer">{{ scope.row.site_power[v].get | rounding}}</span>
                  </div>
                </div>
                <div v-else>
                  {{ scope.row.site_power[v].get | rounding}}
                </div> 
            </div>
              <div style="width: 193px;margin-left: -9px;cursor:pointer" >
                        {{scope.row.site_power[v].gap | rounding }}
              </div>
            </template>
          </el-table-column>

          <el-table-column align="center" fixed="right" label="操作" min-width="180">
            <template slot-scope="scope" v-if="scope.row.technical_field_name != '总计'">
              <div>
                <el-button v-show="scope.row.showEdit" type="text" size="mini" @click="saveFn(scope.$index,scope.row)">
                  保存
                </el-button>
                <el-button v-show="!scope.row.showEdit" type="text" size="mini" @click="editFn(scope.$index,scope.row)">
                  编辑
                </el-button>
                <el-button v-show="scope.row.showEdit" type="text" size="mini" @click="cancelFn(scope.$index,scope.row)" >
                  取消
                </el-button>
              </div>
            </template>
          </el-table-column>
    </el-table> -->
    <!-- <div class="pagination">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPageG"
        :page-sizes="[5, 10, 20, 40]" :page-size="pagesizeG" layout="total, sizes, prev, pager, next, jumper" :total="TectableData.length">
      </el-pagination>
    </div> -->

    <!-- <Resourcerequ></Resourcerequ> -->

    </el-card>
    <el-dialog title="人员查看" :visible.sync="dialogVisible" width="80%" :destroy-on-close="true">
      <TalentDialog v-if="dialogVisible" :itemFormData="itemFormData" :isEdit="false"></TalentDialog>
    </el-dialog>
    <el-dialog title="人员编辑" :visible.sync="dialogEditVisible" width="80%" :destroy-on-close="true">
      <TalentDialog v-if="dialogEditVisible" :itemFormData="itemFormData" :filterData="filterData" :singleFilterData="singleFilterData" :isEdit="true" @submit="editSubmit"></TalentDialog>
    </el-dialog>
    <el-dialog title="人员分配" :visible.sync="distributeVisible" width="80%" :destroy-on-close="true" @close="getDataList">
      <Distribute v-if="distributeVisible" :projectList="projectList" :project_id="params['site_power_id']" :dateRange="dateRange" :employee_id="employee_id" @changeConfig="configChange"></Distribute>
    </el-dialog>
    <el-dialog title="人员外派" :visible.sync="dispatchVisible" width="600px" :destroy-on-close="true">
      <Dispatch :employee_id="employee_id" :departmentAllData="departmentAllData" @submitDispatch="submitDispatch"></Dispatch>
    </el-dialog>
    <el-dialog title="工时分配" :visible.sync="manPowerVisible" width="600px" :destroy-on-close="true" @close="clearSelectRange">
      <ManPower v-if="manPowerVisible" :employee_id="employee_id" :loadingBtn="loadingBtn" :weekCol="selectWeek" :departmentAllData="departmentAllData" @submitManPower="submitManPower" @submitManPower1="submitManPower1" @submitStatus="submitStatus"></ManPower>
    </el-dialog>
    <el-dialog title="部门协管" :visible.sync="assistVisible" width="800px" :destroy-on-close="true" @close="clearSelectRange">
      <Assist v-if="assistVisible"></Assist>
    </el-dialog>
    <el-dialog title="工时预览" :visible.sync="dialogTableVisible" width="80%">
      <span class="demonstration">时间选择</span>
        <el-date-picker
          v-model="value2"
          type="month"
          placeholder="选择月"
          @change="startchange($event)">
        </el-date-picker>
        <div style="float:right">
          <div style="height:30px;width:50px;background:#feecbade;display:inline-block;margin-bottom: -7px"></div><span style="margin-bottom:5px">工时已投满</span>
          <div style="height:30px;width:50px;background:#eb070763;display:inline-block;margin-bottom: -7px"></div><span>工时未投</span>
          <div style="height:30px;width:50px;background:#909399;display:inline-block;margin-bottom: -7px"></div><span>周末/未入职</span>
        </div>
      <el-table
        :data="gridData"
        border
        ref="multipleTable"
        @selection-change="handleSelectionChange"
        tooltip-effect="dark"
        v-loading="loading1"
        style="margin-top:15px"
        :cell-style="tableCellStyle"
        min-height='20'>
        <el-table-column type="selection" width="55" fixed="left"> </el-table-column>
        <el-table-column  label="人员" width="150" align="center" fixed="left">
          <template slot-scope="scope">
            {{scope.row.user}}
          </template>
        </el-table-column>
        <el-table-column v-for="(d,index) in daysCol" :key="index" :label="d" width="150" align="center" >
          <template slot-scope="scope">
              {{ scope.row.spend_data[d]}}
          </template>
        </el-table-column>
      </el-table>
      <!-- <div style="margin-top:10px;font-weight:bolder;color: red;margin-left: 75%;font-size: 15px;">tips : 请先确定当前页人数工时,再进行下一页确定</div> -->
      <div style="margin-left: 81%">
        <el-button type="success" @click="makeSure(true)" style="margin-top:15px; ">确定</el-button>
        <el-button type="primary" @click="makeSure(false)" style="margin-top:15px; ">一键确定所有</el-button>
      </div>
      <el-pagination
        v-show="tableTotal2 > 20"
        background
        layout="prev, pager, next"
        :page-size="params2.pageSize"
        @size-change="pageSizeChange2"
        @current-change="pageNoChange2"
        style="text-align: center"
        :current-page.sync="currentPage"
        :total="tableTotal2">
      </el-pagination>
    </el-dialog>
    <el-dialog title="工时详情" :visible.sync="dialogTableVisible1" width="60%" >
      <span class="demonstration">时间选择</span>
        <el-date-picker
          v-model="valueMon"
          type="month"
          placeholder="选择月"
          @change="startchange2($event)"
          value-format="yyyy-MM" 
          format="yyyy-MM"
          style="margin-left: 10px;width:150px">
        </el-date-picker>
        <span style="margin-left: 30px">事业部</span>
        <el-select
          v-model="deptValue"
          multiple
          clearable
          filterable
          collapse-tags
          @change="deptSearch($event)"
          style="margin-left: 10px;width:270px"
          placeholder="请选择">
          <el-option
            v-for="item in deptOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>

        <div style="float:right">
          <div style="height:30px;width:50px;background:#13ce666b;display:inline-block;margin-bottom: -7px"></div><span style="margin-bottom:5px">工时已确定</span>
          <div style="height:30px;width:50px;background:#eb070763;display:inline-block;margin-bottom: -7px"></div><span>工时未确定</span>
        </div>
      <el-table
        :data="gridData1"
        border
        v-loading="loading2"
        style="margin:15px 0 15px 0"
        :cell-class-name="addClass2"
        min-height='20'
        width="100%"
        element-loading-text="加载中...">
        <el-table-column  label="部门" align="center" fixed="left">
          <template slot-scope="scope">
            {{scope.row.dept_name}}
          </template>
        </el-table-column>
        <el-table-column :label="showMonth" align="center" >
          <template slot-scope="scope">
            总人数:{{scope.row.user_count}} / 确认人数:{{scope.row.confirm_count}}
          </template>
        </el-table-column>
      </el-table>
        <el-button type="success" @click="downLoad()" style="margin-top:15px;margin-left: 82%">导出工时报表</el-button>
      <el-pagination
        v-show="tableTotal3 > 10"
        background
        layout="prev, pager, next"
        :page-size="params3.pageSize"
        @current-change="pageNoChange3"
        style="text-align: center"
        :current-page.sync="currentPage1"
        :total="tableTotal3">
      </el-pagination>
    </el-dialog>
  </div>
</template>
<script>
import { getHeaderName } from '@/app.config'
import talentDialog from './components/talentDialog.vue'
import configDialog from './components/configDialog.vue'
import distribute from './components/distribute.vue'
import dispatch from './components/dispatch.vue'
import manPower from './components/manPower.vue'
import assist from './components/assistDialog.vue'
import { Loading } from 'element-ui'
import { DateUtil } from './utils.js'
import http from '@/views/sys/axios'
import resourcerequ from './components/resourcerequ'



export default {
  // inject: ['reload'],
  components: {
    TalentDialog: talentDialog,
    ConfigDialog: configDialog,
    Distribute: distribute,
    Dispatch: dispatch,
    ManPower: manPower,
    Assist: assist,
    Resourcerequ:resourcerequ,
  },
  data() {
    return {
      technical:'',
      technicalOptions:[],
      newArrG:[],
      currentPageG: 1, //初始页
      pagesizeG: 4, //    每页的数据
      params2:{},
      TectableData:[],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        },
        {
          text: '半年',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
            picker.$emit('pick', [start, end]);
          }
        },
        {
          text: '一年',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
            picker.$emit('pick', [start, end]);
          }
        },
        ]
      },
      deptOptions:[],
      clicked:false,
      showCheck:false,
      showDown:false,
      currentPage:1,
      currentPage1:1,
      deptIds:[],
      dispatchTypeList:[
        {
          label: '未分配满',
          value: 1
        },
        {
          label: '未投',
          value: 2
        },
      ],
      mon:[],
      showMonth:'',
      dialogTableVisible1:false,
      gridData1:[],
      foolishArr:[],
      stupidArr:[],
      multipleSelection: [], // 已选中id合集
      daysCol:[],
      paramMonth:'',
      paramData:[],
      value2:'',
      deptValue:'',
      valueMon:'',
      gridData:[],
      dialogTableVisible:false,
      tableData1:{},
      isShow:false,
      weekRange:[],
      list1: [],
      searchOptions:[],
      searchOptions1:[],
      proNames:'',
      saveData:{},
      deptId:'',
      proName:'',
      params1: {
        pageNo: 1,
        pageSize: 5
      },
      params2: {
        page: 1,
        pageSize: 20
      },
      params3: {
        page: 1,
        pageSize: 10
      },
      tableTotal1:0,
      tableTotal2:0,
      tableTotal3:0,
      GAPtableData:[],
      ind:[],
      tableDataSum: {},
      loading: false,
      loadingGAP:false,
      loading1: false,
      loading2: false,
      loading3: false,
      employee_id: '',
      project_id: '',
      projectList: [],
      dialogVisible: false,
      dialogEditVisible: false,
      dialogConfigVisible: false,
      distributeVisible: false,
      dispatchVisible: false,
      tableData: [],
      tableTotal: 0,
      itemFormData:{},
      filterData:{},
      singleFilterData: [],
      departmentFilterData: [],
      departmentAllData: [],
      distributeList: [],
      weekList: [],
      monthList: [],
      aa:[],
      monthRange: '',
      params: {
        pageNo: 1,
        pageSize: 10
      },
      editList: [{
          name: '职级：',
          value: 'rank'
      },{
          name: '工作岗位：',
          value: 'position'
      },{
          name: '工作模式：',
          value: 'working_mode'
      },
      {
          name: '软件平台：',
          value: 'software_platform'
      },{
          name: '业务领域：',
          value: 'business_area'
      },{
          name: '编程语言：',
          value: 'programing_language'
      },{
          name: '人员状态：',
          value: 'status'
      },{
          name: '员工类型：',
          value: 'type'
      }],
      startWeek: '',
      endWeek: '',
      dateRange: [],
      dept_word: '',
      logo: require('../../assets/question.png'),
      startCell: -1,
      endCell: -1,
      selectRowIndex: -1,
      manPowerVisible: false,
      selectWeek: [],
      assistVisible: false,
      sharePermissions: false,
      loadingBtn: false,
      advanceHidden: true,
      datas1:{},
      downDept:[],
      checkWeekends:[],
      allIds:[],
      // bgColor:true,
    }
  },
  computed:{
    dataGap(){
      return Array.from(new Set([...this.TectableData.slice((this.currentPageG-1)*this.pagesizeG,this.currentPageG*this.pagesizeG),...this.newArrG]))
    }  
  },
  filters: {
    rounding (value) {
      if(value || value === 0) {
        return Number(value).toFixed(1)
      }
    }
  },
  created() {
    Promise.all([this.getDepartmentOwn(),this.getProjectTree()]).then((res) => {
      let data1 = res[0].data.data
      let data2 = res[1].data.data
      this.dept_word = data1.dept_name
      this.params['department'] = data1
      this.getDepartmentFilter()
      this.projectList = data2
      data2.map((v1,i1) => {
        if(v1.children && v1.children.length > 0) {
          v1.children.map((v2,i2) => {
            if(v2.value == this.$route.params.id) {
              this.id2Tech(v2['technical_field_id'])
              this.params['technical_field'] = [v2['technical_field_id']]
              this.dateRange = [v2['project_workflow'].project_start_date,v2['project_workflow'].project_end_date]
              this.weekList = DateUtil.estLabourWeek(v2['project_workflow'].project_start_date,v2['project_workflow'].project_end_date)
            }
          })
        }
      })
      this.getDataList()
    })
  },
  mounted() {
    this.$nextTick(() => {
      if(!this.$route.params.id)  {
        this.defaultWeekTime()
      }
      this.getPermission()
      this.getDepartmentAllFilter()
      this.getFilter()
      this.getSingleFilter()

    })
    this.initData()
    this.getdeptOptions()
  },
  methods: {
     // 切换每页条数时
    handleSizeChange: function(size) {
      this.pagesizeG = size;
    },
    // 切换当前页码时
    handleCurrentChange: function(currentPage) {
      this.currentPageG = currentPage;
    },
    gettableDate(){
      this.loadingGAP = true
      this.newArrG=[]
      this.$axios({
          url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/employee/technical_field_gap',
          method: "post",
          headers: getHeaderName(),
          data:this.params2
        }).then(res => {
          this.loadingGAP = false
          this.TectableData = res.data.data.data; 
          let newA = res.data.data.data
          this.newArrG.push(newA[newA.length-1]); //取出统计行
          this.searchOptions = res.data.data.project_names
          this.technicalOptions = res.data.data.technical_fields
        })
    },
    handleClose(row,v,index){
      let deleteParams = {}
      deleteParams.employee_id = row.employee_id;
      deleteParams.project_id = row.working_hours[v][index].site_power_id;
      deleteParams.spend = '0';
      deleteParams.week_display = v
      this.$axios({
        url: `${process.env.VUE_APP_SOURSE_MANAGE_HOST}/api/v1/employee/assign`,
        method: "post",
        headers: getHeaderName(),
        data: deleteParams
      }).then(res=>{
        if(res.data.code===200){
          row.working_hours[v].splice(index, 1);
          this.$message.success('删除成功')
        }else{
          this.$message.success(res.data.message)
        }
      });
    },
    tableCellStyle(row){
      if(row.columnIndex>1) {
        if(Date.parse(row.row.joinworkdate)>Date.parse(row.column.label)){
          if(row.row.joinworkdate){
             return 'background-color:#909399;'
          }
        }else{
          if(this.checkWeekends.includes(row.column.label)){
            return 'background-color:#909399;'
          }
          if(row.row.spend_data[row.column.label]==8){
            return 'background-color:#feecbade'
          }
          if(row.row.spend_data[row.column.label]==0){
            return 'background-color:#eb070763'
          }
        }
      }
    },
    deptSearch(e){
      this.downDept = e
      this.datas1['top_dept'] = e
      this.currentPage1=1
      this.check()
    },
    getdeptOptions(){
      this.$axios({
        url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/project/get_car_top_dept',
        method: "get",
        headers: getHeaderName()
      }).then(res => {
        if(res.data.code === 200){
          this.deptOptions = res.data.data
        }
      })
    },
    toggle1(){
      this.clicked = 0
    },
    toggle(){
      this.clicked = 1
    },
    returnClass() {
        return this.clicked==0 ? 'el-icon-caret-right' : 'el-icon-caret-bottom' 
      },
    downLoad(res,name){
       this.loading2 = true
       let datas2 = {}
       datas2["month"] = this.paramMonth
       datas2["dept_ids"] = this.deptIds
       datas2["date"] = this.mon
       datas2["top_dept"] = this.downDept
        this.$axios({
          url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/employee/get_working_hours_to_excel',
          method: "post",
          headers: getHeaderName(),
          responseType: 'blob',
          data:datas2
        }).then(res => {
          if(res.status === 200) {
            const blob = new Blob([res.data]);
            const fileName = '工时报表.xls';
            // for IE
          if (window.navigator && window.navigator.msSaveOrOpenBlob) {
              window.navigator.msSaveOrOpenBlob(blob, fileName)
          } else {
              // for Non-IE (chrome, firefox etc.)
              const elink = document.createElement('a');
              elink.download = fileName;
              elink.style.display = 'none';
              elink.href = URL.createObjectURL(blob);
              document.body.appendChild(elink);
              elink.click();
              URL.revokeObjectURL(elink.href);
              document.body.removeChild(elink);
              this.loading2 = false
              this.$message({
              type:"success",
              message:"导出成功!"
            })
          }
          } else {
            this.loading3 = false
            this.$message.error('下载出错了!');
          }
        }).catch(err => {
            this.$message.error('下载出错了!');
            this.loading = false
        })
    },
    startchange2(e){
      this.currentPage1=1
      let nowTime = new Date(e)
      let getYear = nowTime.getFullYear()
      let mon = nowTime.getMonth() + 1
      let day = nowTime.getDate()
      this.showMonth = getYear + '-' + mon
      day>25 ? mon+=1 : mon
      this.paramMonth = this.showMonth // 导出时month参数
      this.currentPage1 = this.params3.page
      this.check()
      this.mon = this.startchange1(e)  // 导出时date参数
    },
    pageNoChange3(val) {
      this.currentPage1=val
      this.check()
    },
    check(){
      this.dialogTableVisible1 = true
      this.loading2 = true
      this.datas1['page'] = this.currentPage1
      this.datas1['month'] = this.paramMonth
      this.$axios({
        url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/employee/dept_confirm',
        method: "post",
        headers: getHeaderName(),
        data: this.datas1
      }).then((res => {
        if(res.data.code === 200){
          this.loading2 = false
          this.gridData1 = res.data.data.data
          this.tableTotal3 = res.data.data.totalCount
          this.deptIds = []
          this.params3.page = 1
          this.gridData1.forEach((v,i) =>{
            this.deptIds.push(v.dept_id)
          })
        }else{
          this.loading2 = false
          this.$message({
            type:error,
            message:"获取失败!"
          })
        }
      }))
    },
    addClass2({row,column,rowIndex,columnIndex}){
      if(column.label != "部门"){
        if(row.status === false){
        return 'cell-two'
      }else if(row.status === true){
        return 'cell-three'
      }
      }
    },
    makeSure(flag){
        let paramsData = {}
        paramsData['month'] = this.paramMonth
        if(flag){
          paramsData['confirm_employee_ids'] = this.multipleSelection
          paramsData['cancel_employee_ids'] = this.foolishArr
          paramsData['date'] = this.paramData
        }else{
          paramsData['confirm_employee_ids'] = this.allIds
          paramsData['cancel_employee_ids'] = []
          paramsData['date'] = this.paramData
        }
        this.$axios({
            url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/employee/confirm',
            method: "post",
            headers: getHeaderName(),
            data: paramsData
        }).then((res => {
          if(res.data.code === 200){
            this.currentPage=1
            this.showDetile()
            this.$message(res.data.message)
          }else{
            this.$message(res.data.message)
          }
        }))
    },
    pageNoChange2(val) {
      this.currentPage=val
      this.showDetile()
    },
    pageSizeChange2(val) {
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
        this.multipleSelection=[]
        val.forEach((v,i) => {
          this.multipleSelection.push(v.employee_id)
        })
        this.foolishArr = this.stupidArr.filter(key => !this.multipleSelection.includes(key))
    },
    showDetile(){
      this.dialogTableVisible = true
      this.loading1 = true
      this.params2['month'] = this.paramMonth
      this.params2['date'] = this.paramData
      this.params2['page'] = this.currentPage
      this.$axios({
          url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/employee/get_working_hours',
          method: "post",
          headers: getHeaderName(),
          data: this.params2
      }).then(res => {
        if(res.data.code === 200){
          this.loading1 = false
          this.gridData = res.data.data.data
          this.checkWeekends = res.data.data.weekend_list
          this.allIds = res.data.data.all_employee_ids
          this.stupidArr = []
          this.gridData.map((v,i) => {
           this.stupidArr.push(v.employee_id)
          })
        this.$nextTick(()=>{
          this.gridData.forEach(row => {
            if(row.status){
              this.$refs.multipleTable.toggleRowSelection(row,true);
            }
          })
        })
          this.tableTotal2 = res.data.data.totalCount
        }else{
          this.loading1 = false
        }
      })
    },
    // 默认当前月
    initData(){
      var date5 = new Date();
      var year5 = date5.getFullYear();
      var month5 = date5.getMonth() + 1;
      let day5 = date5.getDate()
      day5>25 ? month5+=1 : month5
      var toMonth = year5 + '-' + month5 ;
      this.showMonth = toMonth
      this.value2 = toMonth;
      this.paramMonth = toMonth
      this.paramData = this.startchange1(this.value2)
      this.mon = this.paramData
      this.daysCol = []
      this.paramData.map((k,i) => {
          let strArr1 = k[0].split("-")
          strArr1 = strArr1.map(function(v){
            if (v[0] == "0") {
              return (v = v.slice(1));
            } else {
              return v;
            }
          })
          let newVal1 = strArr1.join("-")
          this.daysCol.push(newVal1)
      })
    },
    startchange(e){
      let nowTime = new Date(e)
      let getYear = nowTime.getFullYear()
      let startData,endData,startTime,endTime
      var Y = nowTime.getFullYear() + '-';
      var M = nowTime.getMonth() + 1
      this.paramMonth = getYear + '-' + M
      this.showMonth = getYear + '-' + M
      // 前一月所在时间日期
      if(M==1 || M==2 || M==4 || M==6 || M==8 || M==9 || M==11) { //判断31天时
        startData = new Date(nowTime-7*24*3600*1000);
        let y = startData.getFullYear();
        let m = startData.getMonth()+1;
        let d = startData.getDate();
        startTime = y+'-'+m+'-'+d;
      }else if(M==5 || M==7 || M==10 || M==12){ // 判断30天时
        startData = new Date(nowTime-6*24*3600*1000);
        let y = startData.getFullYear();
        let m = startData.getMonth()+1;
        let d = startData.getDate();
        startTime = y+'-'+m+'-'+d;
      }
       if(M==3){
         if(getYear%4==0 && getYear%100!=0 || getYear%400==0){ //判断为闰年时 29
          startData = new Date(nowTime-5*24*3600*1000);
          let y = startData.getFullYear();
          let m = startData.getMonth()+1;
          let d = startData.getDate();
          startTime = y+'-'+m+'-'+d;
         }else { //判断为平年时 28
          startData = new Date(nowTime-4*24*3600*1000);
          let y = startData.getFullYear();
          let m = startData.getMonth()+1;
          let d = startData.getDate();
          startTime = y+'-'+m+'-'+d;
         }
       }
      // 当前月所在日期 24号
        let y1 = getYear
        let m1 = M
        let d1 = nowTime.getDate() + 23
        endTime = y1+'-'+m1+'-'+d1;
        let dataArr = []
        dataArr = this.getAllDate(startTime,endTime)
        let dataArr1 = []
        let Arr3 = []
        //循环遍历数组
        dataArr.map(val => {
          //去掉月份前面的0
          let strArr = val.split("-")
          strArr = strArr.map(function(v){
            if (v[0] == "0") {
              return (v = v.slice(1));
            } else {
              return v;
            }
          })
          let newVal = strArr.join("-")
          let week3 = DateUtil.datetoWeek(newVal)
          let Arr = []
          Arr3.push(newVal)
          Arr.push(newVal,week3)
          dataArr1.push(Arr)
        })
        this.daysCol = []
        this.daysCol = Arr3
        this.paramData = dataArr1
        this.mon = dataArr1
        this.currentPage=1
        this.showDetile()
        return this.paramData = dataArr1
    },
    startchange1(e){
      this.currentPage=1
      this.currentPage1=1
      let nowTime = new Date(e)
      let getYear = nowTime.getFullYear()
      let startData,endData,startTime,endTime
      var Y = nowTime.getFullYear() + '-';
      var M = nowTime.getMonth() + 1
      this.paramMonth = getYear + '-' + M
      var D = nowTime.getDate();
      var h = nowTime.getHours() + ':';

      // 前一月所在时间日期
      if(M==1 || M==2 || M==4 || M==6 || M==8 || M==9 || M==11) { //判断31天时
        startData = new Date(nowTime-7*24*3600*1000);
        let y = startData.getFullYear();
        let m = startData.getMonth()+1;
        let d = startData.getDate();
        startTime = y+'-'+m+'-'+d;
      }else if(M==5 || M==7 || M==10 || M==12){ // 判断30天时
        startData = new Date(nowTime-6*24*3600*1000);
        let y = startData.getFullYear();
        let m = startData.getMonth()+1;
        let d = startData.getDate();
        startTime = y+'-'+m+'-'+d;
      }
       if(M==3){
         if(getYear%4==0 && getYear%100!=0 || getYear%400==0){ //判断为闰年时 29
          startData = new Date(nowTime-5*24*3600*1000);
          let y = startData.getFullYear();
          let m = startData.getMonth()+1;
          let d = startData.getDate();
          startTime = y+'-'+m+'-'+d;
         }else { //判断为平年时 28
          startData = new Date(nowTime-4*24*3600*1000);
          let y = startData.getFullYear();
          let m = startData.getMonth()+1;
          let d = startData.getDate();
          startTime = y+'-'+m+'-'+d;
         }
       }
      // 当前月所在日期 24号
        let y1 = getYear
        let m1 = M
        let d1 = nowTime.getDate() + 23
        endTime = y1+'-'+m1+'-'+d1;
        let dataArr = []
        dataArr = this.getAllDate(startTime,endTime)
        let dataArr1 = []
        let Arr3 = []
        //循环遍历数组
        dataArr.map(val => {
          //去掉月份前面的0
          let strArr = val.split("-")
          strArr = strArr.map(function(v){
            if (v[0] == "0") {
              return (v = v.slice(1));
            } else {
              return v;
            }
          })
          let newVal = strArr.join("-")
          let week3 = DateUtil.datetoWeek(newVal) 
          let Arr = []
          Arr3.push(newVal)
          Arr.push(newVal,week3)
          dataArr1.push(Arr)
        })

        this.daysCol = []
        this.daysCol = Arr3
        return this.paramData = dataArr1
    },
    // 计算起止时间的所有日期
    format(time){
      let ymd = ''
      let mouth = (time.getMonth() + 1) >= 10 ? (time.getMonth() + 1) : ('0' + (time.getMonth() + 1))
      let day = time.getDate() >= 10 ? time.getDate() : ('0' + time.getDate())
      ymd += time.getFullYear() + '-' // 获取年份。
      ymd += mouth + '-' // 获取月份。
      ymd += day // 获取日。
      return ymd // 返回日期。
    },
    getAllDate (start, end) {
      let dateArr = []
      let startArr = start.split('-')
      let endArr = end.split('-')
      let db = new Date()
      db.setUTCFullYear(startArr[0], startArr[1] - 1, startArr[2])
      let de = new Date()
      de.setUTCFullYear(endArr[0], endArr[1] - 1, endArr[2])
      let unixDb = db.getTime()
      let unixDe = de.getTime()
      let stamp
      const oneDay = 24 * 60 * 60 * 1000;
      for (stamp = unixDb; stamp <= unixDe;) {
        dateArr.push(this.format(new Date(parseInt(stamp))))
        stamp = stamp + oneDay
      }
      return dateArr
    },
    tableRowClassName({row, rowIndex}) {
      if (rowIndex%2 === 0) {
        return 'warning-row';
      }
      return '';
    },
    getSummaries1(param) {
      const { columns, data } = param;
      const sums = [];
      //循环处理所有列数据
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总计';
          return;
        }else if(index === 1){
          var word1 = <div class="borders">{'总需求'}</div>
          var word2 = <div class="borders">{'总实际'}</div>
          var word3 = <div style="width: 193px;margin-left: -14px;">{'总GAP'}</div>
          sums[index] = [word1,word2,word3];
          return;
        }
        //将每列的所有数据数字化处理成一个数组
        const values1 = data.map(item => {
          if(column.type == 'cell') {
            let obj = item.value
            let spendTime1 = 0
            spendTime1 = Number(obj[column.property].need)
             return spendTime1
          } else {
             return NaN
          }
        });
        const values2 = data.map(item => {
          if(column.type == 'cell') {
            let obj = item.value
            let spendTime2 = 0
            spendTime2 = Number(obj[column.property].get)
             return spendTime2
          } else {
             return NaN
          }
        });
        if (!values1.every(value => isNaN(value))) {
          var num1 = values1.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return (parseFloat(prev) + parseFloat(curr)).toFixed(1)
            } else {
              return parseFloat(prev).toFixed(1)
            }
          }, 0);
          var num2 = values2.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return (parseFloat(prev) + parseFloat(curr)).toFixed(1)
            } else {
              return parseFloat(prev).toFixed(1)
            }
          }, 0);
          var html1 = <div class="borders">{num1}</div>
          var html2 = <div class="borders">{num2}</div>
          var html3 = <div style="width: 193px;margin-left: -14px;">{(num1-num2).toFixed(1)}</div>
          sums[index] = [html1,html2,html3]
        }
        else{
          sums[index] = []
        }
      });
      return sums;
    },
     getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      //循环处理所有列数据
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总计';
          return;
        }
        //将每列的所有数据数字化处理成一个数组
        const values = data.map(item => {
          if(column.type == 'cell') {
            let obj = item.working_hours
            let spendTime = 0
            obj[column.property].map((v,i) => {
              spendTime += Number(v.spend)
            })
             return spendTime
          } else {
             return NaN
          }
        });
        //当前列的所有数据全是数字类型时
        if (!values.every(value => isNaN(value))) {
          //将当前列数据数组中的所有值，从左到右依次累加处理
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return (parseFloat(prev) + parseFloat(curr)).toFixed(1)
            } else {
              return parseFloat(prev).toFixed(1)
            }
          }, 0);
        } else {
          sums[index] = '';
        }
      });
      return sums;
    },
    changeSearch(val,type){
      // this.params1['project_name'] = val
      // this.params.pageNo = 1
      // this.getGap()
      if(type=='项目'){
        this.params2['select_project_names'] = val
      }
      if(type=='技术领域'){
        this.params2['select_technical_field_ids'] = val
      }
      this.currentPageG  = 1
      this.gettableDate()
    },
    saveFn(index,row){
     let datas = {
        technical_field_id:row.technical_field_id,
        department:this.deptId,
        project_name:this.proName,
        json_data:row.site_power
      }
      row.showEdit = false
      this.$axios({
        // url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/update/project_need',
        url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/employee/change_technical_field_need',
        method: "post",
        headers: getHeaderName(),
        data: datas
      }).then((res => {
        if(res.data.code === 200){
          this.$message({
            type:"success",
            message:"修改成功!"
          })
          this.gettableDate()
        }
      }))
      this.$set(this.TectableData,index,row)
    },
    cancelFn(index,row){
      row.showEdit = false
      this.gettableDate()
    },
    editFn(index,row){
      row.showEdit = true
      this.proName = row.project_name
      // this.saveData = row.value
      // console.log(row.site_power,789)
      this.$set(this.TectableData,index,row)
    },
    getGap(){
      //  this.loadingGAP = true
      //  this.params1['pageSize'] = 5
      //  this.$axios({
      //   url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/gap',
      //   method: "post",
      //   headers: getHeaderName(),
      //   data: this.params1
      // }).then((res => {
      //   if(res.data.code === 200) {
      //      this.loadingGAP = false
      //     this.tableTotal1 = res.data.data.count
      //     this.GAPtableData = res.data.data.dept_project
      //     this.searchOptions = res.data.data.project_name
      //     this.$nextTick(() => {
      //       if(this.$refs.singleTable1) {
      //         this.$refs.singleTable1.doLayout(); // 解决表格错位
      //       }
      //     });
      //   }
      // }))
     
    },
    triggleSearch() {
      this.advanceHidden = !this.advanceHidden
    },
    week2date(val) {
      let arr = val.split("-")
      let year = arr[0]
      let week = arr[1]

      let betDay = new Date(year+1+'-01-01 00:00:00').getTime() - new Date(year+'-01-01 00:00:00').getTime()
      let newD1 = new Date(year,0,1)
      let newD2 = new Date(year,11,31)

      let dayMS=24*60*60*1000
      let firstDay=firstDay=(7-newD1.getDay())*dayMS
      let weekMS=0
      if(newD1.getDay() < 4) {
         weekMS=(week-2)*7*dayMS
      } else {
        weekMS=(week-1)*7*dayMS
      }
      let result=newD1.getTime()+firstDay+weekMS+5*dayMS
      newD1.setTime(result)
      return val + '周 \n(' + newD1.getFullYear() + "/" + (newD1.getMonth()+1) + "/" +newD1.getDate() + ')'
    },
    defaultWeekTime() {
        let startD = new Date()
        let initY = startD.getFullYear();
        let initM = startD.getMonth() + 1; //当前月
        let initMS = startD.getMonth(); //上月
        let initD = startD.getDate();
        let beginDate,endDate;
        let toTime = new Date(initY,initM,1); //当前月第一天
        let toTimeS = new Date(initY,initMS,1); // 上月第一天
         //默认开始时间
        if(initM==1 || initM==2 || initM==4 || initM==6 || initM==8 || initM==9 || initM==11){
          let m 
          initD>=25 ? m=initM : m=initMS  // 判断25号前后？前月为上月，后为本月
          let y = startD.getFullYear(); 
          let d = toTimeS.getDate() + 24;
          beginDate = y+'-'+m+'-'+d;
        }else if(initM==5 || initM==7 || initM==10 || initM==12){ // 判断30天时
          let m 
          initD>=25 ? m=initM : m=initMS
          let y = startD.getFullYear();
          let d = toTimeS.getDate() + 24;
          beginDate = y+'-'+m+'-'+d;
        }
        if(initM==3){
          if(initY%4==0 && initY%100!=0 || initY%400==0){ //判断为闰年时 29
            let y = startD.getFullYear();
            let m ;
            initD>=25 ? m=initM : m=initMS;
            let d = toTimeS.getDate() + 24;
            beginDate = y+'-'+m+'-'+d;
          }else { //判断为平年时 28
            let y = startD.getFullYear();
            let m ;
            initD>=25 ? m=initM : m=initMS;
            let d = toTimeS.getDate() + 24;
            beginDate = y+'-'+m+'-'+d;
          }
        }
        // 默认结束时间
        let d1 = toTime.getDate() + 23
        initD>=25 ? initM+=1 : initM
        endDate = initY+'-'+initM+'-'+d1;
        // let endD = new Date()
        // endD.setMonth(endD.getMonth() + 2)
        // let beginDate = startD.getFullYear()+'-'+(startD.getMonth()+1)+'-'+startD.getDate()
        // let endDate = endD.getFullYear()+'-'+(endD.getMonth()+1)+'-'+endD.getDate()
        this.dateRange = [beginDate,endDate]
        this.weekList = DateUtil.estLabourWeek(beginDate,endDate)
    },
    defaultMonthTime() {
        let end = new Date()
        let start = new Date()

        let ys = start.getFullYear()
        let ms = start.getMonth()

        let ye, me
        if(ms > 6) {
          ye = start.getFullYear() + 1
          me = start.getMonth() + 5 - 12
        } else {
          ye = start.getFullYear()
          me = start.getMonth() + 5
        }

        if(ms.toString().length == 1) {
          ms = "0" + ms
        }
        if(me.toString().length == 1) {
          me = "0" + me
        }
        let starting = `${ys}-${ms}`
        let ending = `${ye}-${me}`
        this.monthRange = [starting, ending]
        this.monthList = this.getMonthRange(starting, ending)
    },
    getMonthRange(start,end) {
      var result = [];
      var starts = start.split('-');
      var ends = end.split('-');
      var staYear = parseInt(starts[0]);
      var staMon = parseInt(starts[1]);
      var endYear = parseInt(ends[0]);
      var endMon = parseInt(ends[1]);
      while (staYear <= endYear) {
          if (staYear === endYear) {
              while (staMon <= endMon) {
                  if(staMon.toString().length == 1) {
                    result.push(`${staYear}-0${staMon}`);
                  } else {
                    result.push(`${staYear}-${staMon}`);
                  }
                  staMon++;

              }
              staYear++;
          } else {
              if (staMon > 12) {
                  staMon = 1;
                  staYear++;
              }
              if(staMon.toString().length == 1) {
                result.push(`${staYear}-0${staMon}`);
              } else {
                result.push(`${staYear}-${staMon}`);
              }
              staMon++;
          }
      }
      return result;
    },
    addClass({row,column,rowIndex,columnIndex}){
      row.index = rowIndex;
      column.index = columnIndex;
      column.label.match(/\((.+)\)/g); //取表头括号后面的日期 2021/4/9
      let sdtime = new Date(RegExp.$1) //标准时间
      // let tempTime = sdtime.getTime()-96*60*60*1000 // 当周第一天的日期
      if(column.type == 'cell'&& row.joinworkdate){
        if(RegExp.$1 && sdtime<Date.parse(row.joinworkdate)){
          return 'cell-grey'
        }
      }
      if(column.type == 'cell' && row.name!='未投总计' ) {
          if(this.clicked){ //
            if(row.selectList && row.selectList[columnIndex - 10] && row.selectList[columnIndex - 10].value) {
              return 'cell-green';
            }
            else {
              if(column.property && row.matter_map[column.property]) {
                return 'cell-light'
              } else {
                let spendTime = 0
                if(row.working_hours[column.property]){
                  row.working_hours[column.property].forEach( v =>{
                    spendTime += v.spend
                  })
                  if(spendTime < 1 && spendTime > 0){
                    return 'cell-one'
                  }
                  if(spendTime == 1){
                    return ''
                  }
                  if(spendTime == 0) {
                    return 'cell-zore'
                  }
                }
              }
            }
        }else{ //默认不展开
            if(row.selectList && row.selectList[columnIndex - 1] && row.selectList[columnIndex - 1].value) {
              return 'cell-green';
            }
            else {
              if(column.property && row.matter_map[column.property]) {
                return 'cell-light'
              } else {
                let spendTime = 0
                if(row.working_hours[column.property]){
                  row.working_hours[column.property].forEach( v =>{
                    spendTime += v.spend
                  })
                  if(spendTime.toFixed(1) < 1 && spendTime.toFixed(1) > 0){
                    return 'cell-one'
                  }
                  if(spendTime.toFixed(1) == 1){
                    
                    return ''
                  }
                  if(spendTime.toFixed(1) == 0) {
                    return 'cell-zore'
                  }
                }
              }
            }
        }
      } else {
        return ''
      }
    },
    selectCell(row, column, cell, event) {
      column.label.match(/\((.+)\)/g); 
      let sdtime = new Date(RegExp.$1) 
      if(column.type != 'cell') {
        return false
      }else{
        if(row.joinworkdate&&RegExp.$1 && sdtime<Date.parse(row.joinworkdate)){
          return false
        }
      }
      if(this.selectRowIndex != row.index) {
        this.clearSelectRange()
        this.selectRowIndex = row.index
        this.startCell = -1
        this.endCell = -1
      }
      let index = row.index
      let colIndex = this.clicked?column.index - 10:column.index - 1  
      let inputList = []
        for(let key in this.weekList) {
        inputList.push({
          key: key,
          value: this.weekList[key]
        })
      }
      let selectWeek = []
      let selectList = []
      if((this.startCell < 0 && this.endCell < 0) || (this.startCell >= 0 && this.endCell >= 0)) {
        this.startCell = colIndex
        this.endCell = -1
        inputList.map((v,i) => {
          if(i == colIndex) {
            selectList.push({
              key: v.key,
              value: true
            })
          } else {
            selectList.push({
              key: v.key,
              value: false
            })
          }
        })
      } else {
        this.endCell = colIndex
        let min = this.startCell <= this.endCell ? this.startCell : this.endCell
        let max = this.startCell <= this.endCell ? this.endCell : this.startCell
        inputList.map((v,i) => {
          if(i >= min && i <= max) {
            selectList.push({
              key: v.key,
              value: true
            })
            selectWeek.push(v.value)
          } else {
            selectList.push({
              key: v.key,
              value: false
            })
          }
        })
        this.employee_id = row.employee_id
        this.manPowerVisible = true
      }
      this.selectWeek = selectWeek
      row.selectList = selectList
      this.$set(this.tableData, index, row)
    },
    clearSelectRange() {
      if(this.selectRowIndex != -1) {
        let index = this.selectRowIndex
        let row = this.tableData[index]
        row.selectList = []
        this.$set(this.tableData, index, row)
        this.selectRowIndex = -1
      }

    },
    getPermission() {
      this.$axios({
        url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/department/share/permission',
        method: "get",
        headers: getHeaderName()
      }).then(res => {
        if(res.data.status == 403) {
          this.$message.error('您无查看权限');
          this.$router.push({
              path: '/'
          })
        }
        if(res.data.code == 200 && res.data.status != 403) {
          this.sharePermissions = res.data.data
        }
      })

    },
    getDataList() {
      this.loading = true
      let params = Object.assign({},this.params)
      for(let key in params){
        if(Array.isArray(params[key])) {
          if(params[key].length > 0) {
            if(key == 'department') {
              params[key] = params[key][params[key].length - 1]
            } else {
              if(key == 'technical_field') {
                let list = []
                list = params[key].map((v) => {
                  if(Array.isArray(v)) {
                    return v[v.length - 1]
                  } else {
                    return v
                  }
                })
                params[key] = list.join()
              }
              if(key == 'site_power_id') {
                if(Array.isArray(params[key])) {
                  params[key] = params[key][1]
                }

              }
              if(key != 'technical_field' && key != 'site_power_id')  {
                 params[key] = params[key].join()
              }
            }
          } else {
            delete params[key]
          }
        }
      }
      params['week_range'] = this.weekList.join()
      this.params1 = params
      this.params2 = params
      this.deptId = params.department
      this.weekRange = this.weekList.join()
      this.$axios({
        url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/employee',
        method: "post",
        headers: getHeaderName(),
        data: params
      }).then(res => {
        if(res.data.status == 403) {
          this.$message.error('您无查看权限');
          this.$router.push({
              path: '/'
          })
        }
        if(res.data.code == 200 && res.data.status != 403) {
          this.showCheck = res.data.data.is_car_dept
          this.showDown = res.data.data.show_working_hours
          this.params1.pageNo = 1
          // this.params2.page = 1
          // this.getGap()
          this.gettableDate()
          this.tableData = res.data.data.data
          this.tableData1 = res.data.data.statistics
          this.tableTotal = res.data.data.totalCount
          this.$nextTick(() => {
            if(this.$refs.singleTable) {
              this.$refs.singleTable.doLayout(); // 解决表格错位
            }
          });
        }
        this.loading = false
      })

    },
    getFilter() {
      this.$axios({
        url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/employee/filter',
        method: "get",
        headers: getHeaderName(),
      }).then(res => {
        this.filterData = res.data.data
      })
    },
    getProjectFilter() {
      this.loading = true
      return new Promise((resolve, reject) => {
        this.$axios({
          url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/project/demand/list',
          method: "get",
          headers: getHeaderName(),
        }).then(res => {
          if(res.data.status == 403) {
            this.$message.error('您无查看权限');
            this.$router.push({
                path: '/'
            })
          }
          if(res.data.code == 200 && res.data.status != 403) {
            resolve(res)
          }

        }).catch(error => {
          reject(error)
        })
      })

    },
    getProjectTree() {
      return new Promise((resolve, reject) => {
        this.$axios({
          url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/project/demand/tree',
          method: "get",
          headers: getHeaderName(),
        }).then(res => {
          if(res.data.status == 403) {
            this.$message.error('您无查看权限');
            this.$router.push({
                path: '/'
            })
          }
          if(res.data.code == 200 && res.data.status != 403) {
            resolve(res)
          }

        }).catch(error => {
          reject(error)
        })
      })

    },
    id2Tech(id) {
      this.$axios({
        url: `${process.env.VUE_APP_SOURSE_MANAGE_HOST}/api/v1/filter/technical_field/${id}/relation`,
        method: "get",
        headers: getHeaderName(),
      }).then(res => {
        if(res.data.status == 403) {
          this.$message.error('您无查看权限');
          this.$router.push({
              path: '/'
          })
        }
         if(res.data.code == 200 && res.data.status != 403) {
           this.params['technical_field'] = res.data.data
            this.params.pageNo = 1
            this.getDataList()
         }

      })
    },
    getSingleFilter() {
      this.$axios({
        url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/filter/technical_field/tree',
        method: "get",
        headers: getHeaderName(),
      }).then(res => {
        this.singleFilterData = res.data.data
      })
    },
    getDepartmentOwn() {
      return new Promise((resolve, reject) => {
        this.$axios({
          url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/department/own',
          method: "get",
          headers: getHeaderName(),
        }).then(res => {
          resolve(res)

        }).catch(error => {
            reject(error)
        })
      })

    },
    getDepartmentFilter() {
      this.$axios({
        url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/department/tree',
        method: "get",
        headers: getHeaderName(),
      }).then(res => {
        this.departmentFilterData = res.data.data.tree_data
      }).catch(error => {
      })

    },
    getDepartmentAllFilter() {
        this.$axios({
            url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/department/all_tree',
            method: "get",
            headers: getHeaderName(),
        }).then(res => {
            this.departmentAllData = res.data.data.tree_data
        })
    },
    getDetails(id,type){
      console.log(65656)
      this.$axios({
        url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/employee/'+id,
        method: "get",
        headers: getHeaderName(),
      }).then(res => {
        this.itemFormData = res.data.data
        if(type == 'edit') {
          this.dialogEditVisible = true
        }
        if(type == 'show') {
          this.dialogVisible = true
        }
      })
    },
    details(id){
      this.getDetails(id,'show')
    },
    edit(id){
      this.getDetails(id,'edit')
    },
    distribute(id){
      this.employee_id = id
      this.distributeVisible = true
    },
    dispatch(id){
      this.employee_id = id
      this.dispatchVisible = true
    },
    deleteDispatch(id) {
      this.$axios({
        url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/expatriate?employee_id=' + id,
        method: "delete",
        headers: getHeaderName(),
      }).then(res => {
        if(res.data.code == 200) {
          this.$message.success(res.data.message)
          this.params.pageNo = 1
          this.getDataList()
        } else {
          this.$message.error(res.data.message)
        }

      })
    },
    toConfig() {
      this.dialogConfigVisible = true
    },
    filterM(e) {
      console.log(e)
    },
    editSubmit(e){
      console.log("e",e)
      let data = {}
      data['status'] = e.status
      data['working_mode'] = e.working_mode
      data['business_area'] = e.business_area
      data['technology_module'] = e.technology_module
      data['programing_language'] = e.programing_language
      data['software_platform'] = e.software_platform
      data['position'] = e.position
      data['type'] = e.type
      let list = []
      if(e.technical_field_list && e.technical_field_list.length) {
        list = e.technical_field_list.map((v) => {
          return v[v.length - 1]
        })
      }
      data['technical_field'] = list

      this.$axios({
        url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/employee/'+ e.employee_id,
        method: "post",
        headers: getHeaderName(),
        data:data
      }).then(res => {
        if(res.data.code == 200) {
          this.$message.success(res.data.message)
          this.dialogEditVisible = false
          this.getDataList()
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    submitDispatch(data) {
      this.$axios({
        url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/expatriate',
        method: "post",
        headers: getHeaderName(),
        data:data
      }).then(res => {
        if(res.data.code == 200) {
          this.$message.success(res.data.message)
          this.dispatchVisible = false
          this.getDataList()
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    submitManPower(data) {
      this.loadingBtn = true
      let params = data
      params['week_display'] = this.selectWeek.join()
      this.$axios({
          url: `${process.env.VUE_APP_SOURSE_MANAGE_HOST}/api/v1/employee/assign`,
          method: "post",
          headers: getHeaderName(),
          data: params
      }).then(res => {
        this.manPowerVisible = false
        this.loadingBtn = false
          if(res.data.status == 'success') {
              this.$message.success(res.data.message)
          } else {
             this.$message({
                showClose: true,
                dangerouslyUseHTMLString: true,
                message: res.data.message,
                type: 'warning',
                duration: 1000 * 5,

              });
          }
          this.getDataList()
      })
    },
    submitManPower1(data) {
      let params = data
      this.loadingBtn = true
      params['week_display'] = this.selectWeek.join()
      this.$axios({
          url: `${process.env.VUE_APP_SOURSE_MANAGE_HOST}/api/v1/employee/assign`,
          method: "patch",
          headers: getHeaderName(),
          data: params
      }).then(res => {
        this.manPowerVisible = false
        this.loadingBtn = false
          if(res.data.status == 'success') {
              this.$message.success(res.data.message)
          } else {
             this.$message({
                showClose: true,
                dangerouslyUseHTMLString: true,
                message: res.data.message,
                type: 'warning',
                duration: 1000 * 10,
              });
          }
          this.getDataList()
      })
    },
    submitStatus(data) {
      let params = data
      this.loadingBtn = true
      params['week_display'] = this.selectWeek.join()
      this.$axios({
          url: `${process.env.VUE_APP_SOURSE_MANAGE_HOST}/api/v1/employee/matter`,
          method: "post",
          headers: getHeaderName(),
          data: params
      }).then(res => {
        this.manPowerVisible = false
        this.loadingBtn = false
          if(res.data.status == 'success') {
              this.$message.success(res.data.message)
          } else {
             this.$message({
                showClose: true,
                dangerouslyUseHTMLString: true,
                message: res.data.message,
                type: 'warning',
                duration: 1000 * 10,

              });
          }
          this.getDataList()
      })
    },
    configChange() {
      this.getFilter()
      this.getSingleFilter()
    },
    openAssist() {
      this.assistVisible = true
    },
    pageNoChange1(val) {
      this.params1.pageNo = val
      // this.getGap()
    },
    pageNoChange(val) {
      this.params.pageNo = val
      this.getDataList()
    },
    pageSizeChange1(val) {
      this.params1.pageSize = val
      // this.getGap()
    },
    pageSizeChange(val) {
      this.params.pageSize = val
      this.getDataList()
    },
    changeFilter(value) {
      this.params.pageNo = 1
      this.params.pageSize = 10
      this.currentPageG = 1
      this.getDataList()
    },
    changeProjectFilter(value) {
      if(value) {
        this.params['technical_field'] = []
        this.defaultWeekTime()
        this.getDataList()
      } else {
        this.params.pageNo = 1
        this.getDataList()
      }

    },
    changeDateRange(e) {
      let list = []
      if(e) {
        list = DateUtil.estLabourWeek(e[0],e[1])
      }
      this.params.pageNo = 1
      this.weekList = list
      this.getDataList()
    },
  }
}

</script>
<style lang="scss" scoped>
@import '../../assets/common/common.scss';

body /deep/.el-table::before {
    z-index: inherit;
}
/deep/ .el-table th.gutter {
  display: table-cell !important;
}

/deep/ .el-dialog__body {
  border-top: 1px solid #b2b2b2;
}
/deep/ .el-table td.cell-two {
  background-color:#eb070763  !important;
  color: #82848a;
}
/deep/ .el-table td.cell-three {
  background-color:#13ce666b  !important;
  color: #82848a;
}

/deep/ .el-divider__text {
  color: #ffffff;
  font-size: 20px;
  font-weight: 600;
  background-color: #e6a23c;
  padding: 6px 16px;
}

/deep/ .el-divider--horizontal {
  margin: 40px 0;
  height: 2px;
}
/deep/ .el-table td.cell-one {
  background-color:#feecbade  !important;
  color: #82848a;
}
/deep/ .el-table td.cell-zore {
  background-color:#eb070763 !important;
  color: #82848a;
}
/deep/ .el-table td.cell-grey {
  background-color:#909399 !important;
  color: #fff;
}
/deep/ .el-table td.cell-red {
  background-color:#ff4949 !important;
  color: #fff;
}
/deep/ .el-table td.cell-yellow {
  background-color:#ffba00 !important;
  color: #fff;
}
/deep/ .el-table td.cell-green {
  background-color:#13ce66 !important;
  color: #fff;
}
/deep/ .el-table td.cell-light {
  background-color:#c5c4c1 !important;
  color: #fff;
}
/deep/ .el-input--medium .el-input__inner {
    height: 40px;
    line-height: 24px;
}
/deep/.el-table .warning-row {
    background: oldlace;
  }

/deep/.el-table .success-row {
  background: #f0f9eb;
}
.inpBorder{
  height: 32px;
  border-radius:5px;
  border-color:rgba(255,255,255,0.5) #c0c4cc #c0c4cc rgba(255,255,255,0.5)}
.search{
  width: 180px;
  margin-bottom: 10px;
}
.borders{
  border-bottom: 1px solid #c5c4c1;
  width:204px;
  margin-left: -14px;
  margin-top:10px;
  margin-bottom:10px;
  height: 32px;
}
.icon-item {
  float: right;
  margin-top: 15px;
  cursor: pointer;
}
.icon-item img {
  width: 30px;
  height: 30px;
}
.dept_word {
  font-size: 20px;
  line-height: 30px;
  margin-top: 10px;
}
.num_word {
  font-size: 16px;
  line-height: 30px;
  margin-top: 10px;
  margin-bottom: 15px;
}

#wrapper {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;
}

.tag-m {
  margin: 0 10px 10px 0;
}
.col-width {
  min-width: 80px;
}
.col-box {
  display: flex;
  margin-bottom: 10px;
  .col-span {
    min-width: 80px;
    line-height: 36px;
    margin-left: 20px
  }
}
.advance-btn {
  color: #1890ff;
  font-size: 14px;
  text-align: center;
  // padding-top: 10px;
  cursor: pointer;
}
.advance-box {
  overflow: hidden;
  &.advance-hidden {
    max-height: 0;
    transition: max-height 0.50s cubic-bezier(0, 1, 0, 1);
  }
  &.advance-show {
    max-height: 999px;
    transition: max-height 0.50s cubic-bezier(1, 0, 1, 0);
  }
}
.status-box {
  height: 40px;
  line-height: 40px;
  transform: rotate(-30deg);
}
.status-style {
  border: 2px solid red;
  border-radius: 4px;
  color: red;
  background-color: transparent;
}

.box {
  display: flex;

  div {
    margin: auto;
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: all 1s ease;
}

.fade-enter,
.fade-leave-to {
  height: 0;
}
.toTop {
  position: fixed;
  bottom: 80px;
  right: 25px;
  z-index: 10;
}

.details {
  color: #1890ff;
  text-decoration: underline;
  cursor: pointer;
}

.choose {
  padding: 20px 0;

  .flex-box {
    display: flex;
    flex-wrap: nowrap;

    .flexEl {
      flex: 1;
      margin: auto;
    }

    .text-align {
      text-align: center;
    }

    .el {
      flex: 0 0 90%;
    }
  }

  .time {
    position: absolute;
    top: 20px;
    right: 41%;
    font-size: 14px;
    color: #606266;
  }

  .newReport {
    position: absolute;
    top: 20px;
    right: 20px;
  }
}

.border {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, .1);
}

.primary {
  color: #409EFF;
  font-size: 30px;
  margin-top: 20px;
  margin-bottom: 10px;
  font-weight: 400;
}

.bgColor {
  background: #fff;
}

.pad {
  padding: 0 20px;
  padding-top: 20px;
}

.marTB {
  margin-top: 20px;
  // margin-bottom: 20px;
}

.btn-group {
  text-align: right;
}

.mar {
  margin: 0 20px;
  margin-top: 20px;
}

.table {
  padding-bottom: 10px;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

</style>
